<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/dropdown/richSelect.js" /></script>

<div id="richselect">
	<div title='API' tabid='tab1'>
		 <div>
			<h2>$.fn.dropdown(ops, datas)</h2>
			<h3>作用：生成下拉框</h3>
			<form id="param" class="init ccay-form">
			    <div class="ccay-form-body">
					<ul>
						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span>
						</li>
					</ul>
				</div>		
				<div class="ccay-form-custom">
					<ul>
						<li class="ccay-form-row"><samp class="i18n" i18nKey="datas"></samp>
							<span class="ccay-form-input">json数据源,用于调用外部预定义的数据源 </span>
						</li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="ops"></samp> <span class='ccay-form-input'>
								<div class="ccay-form-body">
									<ul>
										<li class="ccay-form-row"><samp>
												<h3>参数</h3>
											</samp> <span class="ccay-form-input">
												<h3>描述</h3>
										</span>
										</li>
									</ul>
								</div>		
								<div class="ccay-form-custom">
									<ul>
										<li class="ccay-form-row"><samp>appendAfter</samp> <span class='ccay-form-input'>
												是否将selector加入到input之后，默认为true；grid的editor模式时需要设置为false
										</span></li>
										<li class="ccay-form-row "><samp class="i18n"
												i18nKey="multi: false"></samp> <span
											class='ccay-form-input'>
											是否允许多选
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="onlyone: true"></samp> <span class='ccay-form-input'>
												是否使用唯一模式，既只会生成一个selector
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="combo: true"></samp> <span class='ccay-form-input'>
												是否启用combo模式 
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="delay:100"></samp> <span class='ccay-form-input'>
												combo模式下，延迟过滤的时间
										</span></li>
										<li class="ccay-form-row"><samp>valueField: "value"</samp> <span class='ccay-form-input'>
												值字段名
										</span></li>
										<li class="ccay-form-row "><samp class="i18n"
												i18nKey="displayField: "text""></samp> <span
											class='ccay-form-input'>
											显示字段名
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="richMode"></samp> <span class='ccay-form-input'>
										丰富选择模式
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="combo: true"></samp> <span class='ccay-form-input'>
												是否启用combo模式 
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="delay:100"></samp> <span class='ccay-form-input'>
												combo模式下，延迟过滤的时间
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
										        i18nKey="defaultSelect"></samp><span class="ccay-form-input">
												{Boolean}Sp7新加属性，为false 时不默认选中第一条
										</span></li>
									</ul>
								</div>
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="richMode(丰富选择模块)"></samp> <span class='ccay-form-input'>
								<div class="ccay-form-body">
									<ul>
										<li class="ccay-form-row"><samp>
												<h3>参数</h3>
											</samp> <span class="ccay-form-input">
												<h3>描述</h3>
										</span>
										</li>
									</ul>
								</div>		
								<div class="ccay-form-custom">
									<ul>
										<li class="ccay-form-row"><samp>mode:null,</samp> <span class='ccay-form-input'>
											mode ：模式类型；'tree','grid','dialog',null(页面加载)四种模式
										</span></li>
										<li class="ccay-form-row "><samp class="i18n"
												i18nKey="op:null,"></samp> <span
											class='ccay-form-input'>
										      op : 各种模式下对象的设置项：如：'grid'下为grid的设置
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="url:null,"></samp> <span class='ccay-form-input'>
												url : 请求加载页面的地址，在mode为null和'dialog'中有效
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="width:null,"></samp> <span class='ccay-form-input'>
												width: 设置选择器的宽度
										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="height:null"></samp> <span class='ccay-form-input'>
												height: 设置选择器的高度
										</span></li>
									</ul>
								</div>
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="管理器对象manager"></samp> <span class='ccay-form-input'>
				                <div class="ccay-form-body">
									<ul>
										<li class="ccay-form-row"><samp>
												<h3>参数</h3>
											</samp> <span class="ccay-form-input">
												<h3>描述</h3>
										</span>
										</li>
									</ul>
								</div>		
								<div class="ccay-form-custom">
									<ul>
										<li class="ccay-form-row"><samp>setValue(value,text)</samp> <span class='ccay-form-input'>
										           设置值
										</span></li>
										<li class="ccay-form-row "><samp>reBind:(ajax,datas,def)</samp> <span
											class='ccay-form-input'>
										     重新绑定<br> ajax，同dropdown的ajax设置<br> datas：json数据源,与ajax不能同时使用<br>def：默认值

										</span></li>
										<li class="ccay-form-row"><samp class="i18n"
												i18nKey="disabled(enabled)"></samp> <span class='ccay-form-input'>
                                                                                               设置为不可用<br>enabled，是否为不可用，默认为不可用，true为可用
										</span></li>
									</ul>
								</div>
						</span></li>
					</ul>
				</div>
			</form>

		</div>
	</div>
	<div title="单选表格">
		<h4><span>实例1：单选表格控件</span></h4>
		<div style='padding-left: 30px'>
			<div class="ccay-form-custom ccay-form-custommore">
				<ul>
					<li class="ccay-form-row"><samp>单选表格控件</samp> 
					<span
						class='ccay-form-input'> <input id='girdSelector'
							type="text"/>
					</span>
					</li>
				</ul>
			</div>
		
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea"><pre id="html1">&lt;input id='girdSelector1' type="text"/></pre></div>
<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
/**
  *定义所要展示的数据,   绑定json数据
 */
var datas = [
               { value: 0, text: '我是键值0所指向的内容' },
               { value: 1, text: '我是键值1所指向的内容' },
               { value: 2, text: '我是键值2所指向的内容' },
               { value: 3, text: '我是键值3所指向的内容' },
               { value: 4, text: '我是键值4所指向的内容' },
               { value: 5, text: '我是键值5所指向的内容' },
               { value: 6, text: '我是键值6所指向的内容' },
               { value: 7, text: '我是键值7所指向的内容' }
           ];
/**
  *找到方法并绑定方法，showfirstItem属性负责设置数据展示的方式。
 */
$('#girdSelector1').dropdown({showfirstItem:false}, datas);
	</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#richselect',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
		</div>
		</div>
	<div title="多选表格">
		<h3>效果展示：</h3>
	 	 <h4><span>实例2：多选表格控件</span></h4>
		<div style='padding-left:30px'>
			<div class="ccay-form-custom ccay-form-custommore">
				<ul>
					<li class="ccay-form-row"><samp>多选表格控件</samp> <span
						class='ccay-form-input'> <input id='doubleGridSelector'
							type="text" /> 
					</span></li>
				</ul>
			</div>
		<div class="clear"></div>
		<br>
	 <h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>&lt;input id='doubleGridSelector1' type="text" /></pre>
		</div>
<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
var datas = [
            { value: 0, text: '我是键值0所指向的内容' },
            { value: 1, text: '我是键值1所指向的内容' },
            { value: 2, text: '我是键值2所指向的内容' },
            { value: 3, text: '我是键值3所指向的内容' },
            { value: 4, text: '我是键值4所指向的内容' },
            { value: 5, text: '我是键值5所指向的内容' },
            { value: 6, text: '我是键值6所指向的内容' },
            { value: 7, text: '我是键值7所指向的内容' }
           ];
 /**
 *multi属性设置数据是否可以多选
 */
$('#doubleGridSelector1').dropdown({multi:true}, datas);
	</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#richselect',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
		</div>
       </div>
    <div title="单选树">
    <h3>效果展示：</h3>
    <h4><span>实例4：单选树形控件</span></h4>
		<div style='padding-left:30px'>
		   <form class="init ccay-form">
			<div class="ccay-form-custom ccay-form-custommore">
				<ul>
					<li class="ccay-form-row"><samp>单选树形选择控件</samp> <span
						class='ccay-form-input'> <input id='ddlTree' type="text"  class="required"/><input type="button" onclick="alert('实际保存的是valueField指定的值哦:'+$('#ddlTree').ccayGetValue())" value="得到值"/>
					</span></li>
				</ul>
			</div>
		    <div class="clear"></div>
		  </form>
		<br>
    <h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html4'>&lt;input id='ddlTree1' type="text" /></pre></div>
<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js4'>
var treeOp = {
	mode:'tree',
	op:{
	    /**
	    *引入外部资源
	    */
		url:"services/manage/registry/list",
		setting:{
			expandLevel:"0"
	     }
	}
   };
$('#ddlTree1').dropdown({
	combo:true,
	/**
	 *值字段名
	*/
	valueField:"name",
	/**
	 *显示字段名
	*/
	displayField:"name",
	richMode:treeOp
});
	</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#richselect',$('#js4').html(),$('#html4').html())">亲自试一试</a>
		</div>
		</div>
        </div>
    <div title="多选树">
     <h3>效果展示：</h3>
     <h4><span>实例5：多选树形控件</span></h4>
		<div style='padding-left:30px'>
			<div class="ccay-form-custom ccay-form-custommore">
				<ul>
					<li class="ccay-form-row"><samp>多选树形选择控件</samp> <span
						class='ccay-form-input'> <input id='doubleTree'
							type="text" />
					</span></li>
				</ul>
			</div>
			
		<div class="clear"></div>
		<br>
   <h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html5'>&lt;input id='doubleTree1' type="text" /></pre></div>
     <h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js5'>
$('#doubleTree1').dropdown({
	combo:true,
	valueField:"name",
	displayField:"name",
	richMode:{
		width:280,
		height:380,
		/**
	          *加载外部页面
	     */
		url:"ccay/example/ui/dropdown/tree-dropdown.html"
	}
}).manager().setValue("");
	</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#richselect',$('#js5').html(),$('#html5').html())">亲自试一试</a>
		</div>
		     <h3>tree-dropdown.html 源码:</h3>
		<div class="codeArea">
			<pre>
&lt;div id="trees">
	&lt;div id="tree-dropdown">&lt;/div>
&lt;/div>
&lt;script type="text/javascript">
$(function(){
	//多选树形列表初始化
	var  setting={
		    expandLevel:"0", 
			checkType:'multi',  // 多选
			displayName:"name", // 树节点显示的字段
			check:"checkd",
			children:"children", // 指定子
			checkboxType : {"Y":"s","N":"s"} // 父子的勾选联动关系设置，参考树的api说明
	     };
	$('#tree-dropdown').ccayTree("services/manage/registry/list",setting,function(){});
	//定义 确定 按钮事件
	Ccay.UI.Selector.register('#trees',function(){
		return $("#tree-dropdown").getCcayTreeManager().getCheckedNodes();
	})
})
&lt;/script>
	</pre>
		</div>
		</div>
     </div>
    <div title="页选择">
         <h3>效果展示：</h3>
              <h4><span>实例6：页选择控件</span></h4>
		<div style='padding-left:30px'>
			<div class="ccay-form-custom ccay-form-custommore">
				<ul>
					<li class="ccay-form-row"><samp>页选择控件</samp> <span class='ccay-form-input'> <input id='ddlPage'
							type="text" /> <input id='ddlPage1' type="text" /> 
					</span></li>
			</div>
			
		<div class="clear"></div>
		<br> 
     <h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html6'>&lt;span class='ccay-form-input'> &lt;input id='testPage1' type="text" /> 
&lt;input id='testPage11' type="text" /> </pre></div>
<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js6'>
$('#testPage1,#testPage11').dropdown({
    /**
    *是否使用唯一模式，既只会生成一个selector
    */
	onlyone:true,
	/**
	*是否将selector加入到input之后，默认为true；grid的editor模式时需要设置为false
	*/
	appendAfter:false,
	valueField:"id",
	displayField:"name",
	richMode:{
		width:600,
		height:450,
		url:"ccay/example/ui/dropdown/grid-ddl.html"
	}
});
$('#testPage1').manager().setValue("-1","张三");
$('#testPage11').manager().setValue("-2","李四");
	</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#richselect',$('#js6').html(),$('#html6').html())">亲自试一试</a>
		</div>
		</div>
        </div>
	<div title="弹出框">
	<h3>效果展示：</h3>
	<h4><span>实例7：弹出框表格控件</span></h4>
			<div style='padding-left:30px'>
				<div class="ccay-form-custom ccay-form-custommore">
					<ul>
						<li class="ccay-form-row"><samp>弹出框选择控件</samp> <span
							class='ccay-form-input'> <input id='ddlDialog' type="text" />
						</span></li>
					</ul>
				</div>
				
			<div class="clear"></div>
			<br>
	<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html7'> &lt;input id='ddlDialog1' type="text" /></pre>
			</div>
			<h3>js 源码:</h3>
			<div class="codeArea">
				<pre id='js7'>
	$('#ddlDialog1').dropdown({
	valueField:"id",
	displayField:"name",
	richMode:{
		mode:'dialog',
		width:600,
		height:480,
		url:"ccay/example/ui/dropdown/grid-dialog.html"
	}
	}).manager().setValue("-1","张三");
		</pre>
			</div>
			<div class="try">
				<a onclick="Ccay.example.openTry('#richselect',$('#js7').html(),$('#html7').html())">亲自试一试</a>
			</div>
			</div>
			</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
		<form class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
				<li class="ccay-form-row"><samp>
							<h3>问题</h3>
						</samp> <span class="ccay-form-input">
							<h3>解决方案</h3>
					</span></li>
				</ul>
			</div>
			<div class="ccay-form-custom">
				<ul>
					<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
					<li class="ccay-form-row"><samp class="i18n" i18nKey=""></samp>
						<span class="ccay-form-input"></span></li>
				</ul>
			</div>
		</form>
	</div>
</div>

